<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>transition</title>
    <script src="../js/vue.min.js"></script>

</head>
<body>
<script src="https://unpkg.com/tween.js@16.3.4"></script>
<div id="example-8">
    <input v-model.number="firstNumber" type="number" step="20"> +
    <input v-model.number="secondNumber" type="number" step="20"> =
    {{ result }}
    <p>
        <animated-integer v-bind:getvalue="firstNumber"></animated-integer> +
        <animated-integer v-bind:getvalue="secondNumber"></animated-integer> =
        <animated-integer v-bind:getvalue="result"></animated-integer>
    </p>
</div>
<script>
    // 这种复杂的补间动画逻辑可以被复用
    // 任何整数都可以执行动画
    // 组件化使我们的界面十分清晰
    // 可以支持更多更复杂的动态过渡
    // strategies.
    Vue.component('animated-integer', {
        template: '<span>{{ tweeningValue }}</span>',
        props: {
            getvalue: {
                type: Number,
                required: true
            }
        },
        data: function () {
            return {
                tweeningValue: 0
            }
        },
        watch: {
            ///指监听父组件传递过来的props值 getvalue
            getvalue: function (newValue, oldValue) {
                this.tween(oldValue, newValue)
            }
        },
        mounted: function () {
            this.tween(0, this.value)
        },
        methods: {
            tween: function (startValue, endValue) {
                var vm = this
                function animate (time) {
                    requestAnimationFrame(animate)
                    TWEEN.update(time)
                }
                new TWEEN.Tween({ tweeningValue: startValue })
                        .to({ tweeningValue: endValue }, 500)
                        .onUpdate(function () {
                            vm.tweeningValue = this.tweeningValue.toFixed(0)
                        })
                        .start()
                animate()
            }
        }
    })
    // All complexity has now been removed from the main Vue instance!
    new Vue({
        el: '#example-8',
        data: {
            firstNumber: 20,
            secondNumber: 40
        },
        computed: {
            result: function () {
                return this.firstNumber + this.secondNumber
            }
        }
    })
</script>
</body>
</html>
